<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {padding:0;margin:0;box-sizing:border-box;}
    *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    body {font-size: 14px;}
    .title-l {font-size: 18px;line-height: 40px;margin-bottom: 10px;}
    .checkbox {margin-bottom: 30px;}

/*颜色*/
:root{--dark:#5d677c;--dark-hover:#384253;--tpl:#525CE5;--tpl-hover:#7773d7;--default:#8783e1;--default-hover:#7773d7;--red:#f1716c;--red-hover:#d15451;--orange:#f57e00;--orange-hover:#cf6c03;--yellow:#fac413;--yellow-hover:#e9b712;--green:#26bc5c;--green-hover:#179b47;--cyan:#8cd03d;--cyan-hover:#7dc22d;--blue:#768fe7;--blue-hover:#677ecf;--purple:#9e83e1;--purple-hover:#896eca;--white:#ffffff;--white-hover:#f5f5f5;--gray:#b2b2b2;--gray-hover:#989898;--black:#4a4a4a;--black-hover:#000000;}

/* 美化单选框和复选框 */
@keyframes hover-color{
    from{border-color:#c0c0c0;}
    to{border-color:var(--tpl);}
}
.radio,.checkbox,.toggle{display:inline-block;margin-right:15px;cursor:pointer;}
.radio input,.checkbox input,.toggle input{position:absolute;display:none;}
.radio input[disabled],.checkbox input[disabled]{cursor:not-allowed;}
.radio label,.checkbox label{position:relative;padding-left:25px;vertical-align:middle;user-select:none;display:inline-block;cursor:pointer;}
.radio:hover input + label:before,.checkbox:hover input + label:before{animation-duration:0.4s;animation-fill-mode:both;animation-name:hover-color;}
.radio input + label:before,.checkbox input + label:before{margin:auto 0;position:absolute;top:0;bottom:0;left:0;display:inline-block;width:20px;height:20px;content:'';border:1px solid #c0c0c0;border-radius:2px;background:#fff;}
.radio input + label:after,.checkbox input + label:after{position:absolute;display:none;content:'';}
.radio input[disabled] + label,.checkbox input[disabled] + label{cursor:not-allowed;opacity:.5;}
.radio input[disabled] + label:hover,.radio input[disabled] + label:before,.radio input[disabled] + label:after,.checkbox input[disabled] + label:hover,.checkbox input[disabled] + label:before,.checkbox input[disabled] + label:after{cursor:not-allowed;}
.radio input[disabled] + label:hover:before,.checkbox input[disabled] + label:hover:before{animation-name:none;}
.radio input[disabled] + label:before,.checkbox input[disabled] + label:before{border-color:#e4e4e4;}
.radio input:checked + label:before,.checkbox input:checked + label:before{animation-name:none;}
.radio input:checked + label:after,.checkbox input:checked + label:after{display:block;}
.radio input + label:before{border-radius:50%;}
.radio input + label:after{margin:auto 0;top:0;bottom:0;left:5px;width:10px;height:10px;border-radius:50%;background:var(--tpl);}
.radio input:checked + label:before{border:1px solid var(--tpl);}
.radio input:checked[disabled] + label:after{background:var(--tpl);}
.checkbox input + label:after{margin:auto 0;top:-3px;bottom:0;left:7px;box-sizing:border-box;width:6px;height:12px;transform:rotate(45deg);border-width:2px;border-style:solid;border-color:#fff;border-top:0;border-left:0;}
.checkbox input:checked + label:before{border:1px solid var(--tpl);background:var(--tpl);}


/*棒形按钮*/
.toggle input+label{display:inline-block;position:relative;width:40px;height:22px;cursor:pointer;-webkit-touch-callout:none;margin-right:0;margin-bottom:0;padding-left:40px;line-height:16px;vertical-align:middle;}
.toggle input+label:empty{padding-left:30px;}
.toggle input+label:before{position:absolute;display:inline-block;left:0;content:'';border-style:solid;width:40px;height:22px;border-width:0;border-color:transparent;background:#d8d8d8;border-radius:20px;transition:all .3s;}
.toggle input+label:after{color:#ffffff;position:absolute;content:'';width:20px;height:20px;line-height:20px;top:1px;left:1px;text-align:center;background:#ffffff;box-shadow:0 2px 5px 0 rgba(51,51,51,0.25);border-radius:10px;transition:left .3s,right .3s;}
.toggle input:checked+label:before{background:var(--tpl);transition:all .3s;}
.toggle input:checked+label:after{left:19px;transition:left .3s,right .3s;background:#ffffff;}
.toggle input:disabled+label{cursor:no-drop}
.toggle input:disabled+label:before{opacity:.3}

/*棒形按钮*/
.toggle-text{display:inline-block;margin-right:15px;cursor:pointer;width:60px;vertical-align:super;}
.toggle-text input{position:absolute;display:none;}
.toggle-text input+label{display:inline-block;position:relative;width:60px;height:22px;-webkit-touch-callout:none;cursor:pointer;font-size:13px;letter-spacing:1px;vertical-align:middle;}
.toggle-text input+label:empty{padding-left:30px;}
.toggle-text input+label:before{position:absolute;display:inline-block;left:0;content:'';border-style:solid;width:60px;height:22px;border-width:0;border-color:transparent;background:#d8d8d8;border-radius:20px;transition:all .3s;}
.toggle-text input+label:after{color:#ffffff;position:absolute;content:'';width:20px;height:20px;line-height:20px;top:1px;left:1px;text-align:center;background:#ffffff;box-shadow:0 2px 5px 0 rgba(51,51,51,0.25);border-radius:10px;transition:left .3s,right .3s;}
.toggle-text input:checked+label:before{background:var(--tpl);transition:all .3s;}
.toggle-text input:checked+label:after{left:39px;transition:left .3s,right .3s;background:#ffffff;}
.toggle-text input:disabled+label{cursor:no-drop}
.toggle-text input:disabled+label:before{opacity:.3}
.toggle-text input+label span:first-child{display:none;}
.toggle-text input+label span:last-child{position:absolute;width:30px;left:24px;color:#fff;height:22px;line-height:22px;display:block;text-align:center;}
.toggle-text input:checked+label span:first-child{position:absolute;width:30px;left:6px;color:#fff;height:22px;line-height:22px;display:block;text-align:center;}
.toggle-text input:checked+label span:last-child{display:none;}


</style>
</head>
<body>

<div style="padding:100px;">

    <div class="title-l">原生的checkbox类型input样式</div>
    <div class="checkbox">
        <input type="checkbox" id="d1-1" value="1" checked="">
        <label for="d1-1">置顶</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="d2-1" value="2">
        <label for="d2-1">推荐</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="d3-1" value="3">
        <label for="d3-1">热门</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="d4-1" value="4">
        <label for="d4-1">最新</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="d5-1" value="5" checked="" disabled="">
        <label for="d5-1">禁止</label>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="d6-1" value="6" disabled="">
        <label for="d6-1">禁止</label>
    </div>


    <div class="title-l">原生的radio类型input样式</div>
    <div class="radio">
        <input type="radio" name="r1" id="r1-1" value="1" checked="">
        <label for="r1-1">置顶</label>
    </div>
    <div class="radio">
        <input type="radio" name="r1" id="r2-1" value="2">
        <label for="r2-1">推荐</label>
    </div>
    <div class="radio">
        <input type="radio" name="r1" id="r3-1" value="3">
        <label for="r3-1">热门</label>
    </div>
    <div class="radio">
        <input type="radio" name="r1" id="r4-1" value="4">
        <label for="r4-1">最新</label>
    </div>
    <div class="radio">
        <input type="radio" name="r1" id="r5-1" value="5" disabled="">
        <label for="r5-1">禁止</label>
    </div>


    <div class="title-l">toggle 示例样式</div>
    <div class="toggle">
        <input type="checkbox" id="s-1" value="1" checked="">
        <label for="s-1"></label>
    </div>
    <div class="toggle">
        <input type="checkbox" id="s2-1" value="2">
        <label for="s2-1"></label>
    </div>
    <div class="toggle">
        <input type="checkbox" id="s3-1" value="3" checked="" disabled="">
        <label for="s3-1"></label>
    </div>
    <div class="toggle">
        <input type="checkbox" id="s4-1" value="4" disabled="">
        <label for="s4-1"></label>
    </div>
    <div class="title-l">文本模式，添加class<code>toggle-text</code></div>
    <div class="toggle-text">
        <input type="checkbox" id="s-2" value="1" checked="">
        <label for="s-2"><span>ON</span><span>OFF</span></label>
    </div>
    <div class="toggle-text">
        <input type="checkbox" id="s2-2" value="2">
        <label for="s2-2"><span>开启</span><span>关闭</span></label>
    </div>
    <div class="toggle-text">
        <input type="checkbox" id="s3-2" value="3" checked="" disabled="">
        <label for="s3-2"><span>ON</span><span>OFF</span></label>
    </div>
    <div class="toggle-text">
        <input type="checkbox" id="s4-2" value="4" disabled="">
        <label for="s4-2"><span>ON</span><span>OFF</span></label>
    </div>



</div>
</body>
</html>